<!DOCTYPE html>
<html lang="zh">
<head>
  <title>Video Content Change Based on BoofCV</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="expires" content="0">

  <link rel="stylesheet" href="css/materialdesignicons.min.css">
  <link rel="stylesheet" href="css/scrollbar.css">
  <link rel="stylesheet" href="css/vuetify.min.css">
  <link rel="stylesheet" href="css/style.css">

  <script type="text/javascript" src="js/lib/vue.global.prod.js"></script>
  <script type="text/javascript" src="js/lib/vuetify.min.js"></script>
  <script type="text/javascript" src="js/lib/sockjs.min.js"></script>
  <script type="text/javascript" src="js/lib/webstomp.min.js"></script>
  <script type="text/javascript" src="js/wsocket.js"></script>
</head>
<body>
<v-app id="app" v-cloak>
  <v-layout full-height>
    <!-- 主体部分 -->
    <v-main>
      <v-container fluid class="pb-0">
        <v-tabs v-model="vsn" align-tabs="center">
          <v-tab v-for="v in videoList" :key="v.sn" :value="v.sn">{{v.name}}</v-tab>
        </v-tabs>
        <v-window v-model="vsn">
          <v-window-item class="overflow-fit" v-for="v in videoList" :key="v.sn" :value="v.sn">
            <v-row>
              <v-col cols="12" md="3" v-for="(img, index) in v.images" :key="img.id">
                <v-img :src="img.path" @click="zoomMax(index)"></v-img>
              </v-col>
            </v-row>
          </v-window-item>
        </v-window>
      </v-container>
    </v-main>

    <v-dialog v-model="dialog" content-class="align-center">
      <v-btn icon flat class="btn-close" @click="dialog=false;stopLive();">
        <v-icon icon="mdi-close-circle-outline" size="x-large"></v-icon>
      </v-btn>
      <v-carousel hide-delimiters progress="blue-darken-4" :continuous="false" height="90%" v-model="curImgIndex" @dblclick="playLive">
        <v-carousel-item :draggable="false" :aspect-ratio="16/9" v-for="img in curImgGroup" :key="img.id" :src="img.path"></v-carousel-item>
      </v-carousel>
      <div class="similarity">{{curImgGroup[curImgIndex].similarity}}</div>
    </v-dialog>
  </v-layout>
</v-app>

<script type="text/javascript" src="js/index.js"></script>
</body>
</html>